<template>
  <div>
    <p ft20
      :class="$style.title">个人中心</p>
    <div :class="$style.main">
      <div>
        <el-card>
          <div slot="header"
            :class="$style.cardHeader">
            <span>公告</span>
            <div space></div>
            <img src="@/assets/搜索.png">
            <el-button type="text">全部</el-button>
          </div>
          <div :class="$style.cardBody">
            <el-table :data="tableDataA">
              <el-table-column v-for="(item, index) of tableColumnA"
                :key="index"
                :label="item.label"
                :prop="item.prop"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>

      <div>
        <el-card>
          <div slot="header"
            :class="$style.cardHeader">
            <span>通讯录</span>
            <div space></div>
            <img src="@/assets/搜索.png">
            <el-button type="text">全部</el-button>
          </div>
          <div :class="$style.cardBody">
            <el-table :data="tableDataB">
              <el-table-column v-for="(item, index) of tableColumnB"
                :key="index"
                :label="item.label"
                :prop="item.prop"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableDataA: [{}],
      tableDataB: [{}],

      tableColumnA: [
        {
          label: '公告标题',
          prop: ''
        },
        {
          label: '公告内容',
          prop: ''
        },
        {
          label: '发布时间',
          prop: ''
        }
      ],
      tableColumnB: [
        {
          label: '姓名',
          prop: ''
        },
        {
          label: '部门',
          prop: ''
        },
        {
          label: '手机号码',
          prop: ''
        },
        {
          label: 'E-mail',
          prop: ''
        },
        {
          label: '微信号码',
          prop: ''
        }
      ]
    }
  }
}
</script>

<style module lang="scss">
.title {
  font-weight: bold;
}

.main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  > div {
    width: 50%;

    &:first-child {
      padding-right: 8px;
    }
    &:last-child {
      padding-left: 8px;
    }
  }
}

.cardHeader {
  display: flex;
  align-items: center;

  img {
    width: 20px;
    height: 20px;
    margin-right: 20px;
  }

  > [space] {
    flex-grow: 1;
  }
}
</style>
